/*
 * Wire
 * Copyright (C) 2018 Wire Swiss GmbH
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see http://www.gnu.org/licenses/.
 *
 */

// MEMBER LIST
.message-list {
  flex: 1 1;
  overflow: hidden;
}

.messages-wrap {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.messages {
  transform: translateZ(0);
  height: 100%;
  max-width: @conversation-max-width;
}

// MESSAGE
.message {
  position: relative;
  margin-bottom: 16px;

  & a {
    text-decoration: none;
  }
  & * {
    .accent-selection-color;
  }
  &:last-child {
    margin-bottom: 24px;
  }

  &.hover .time,
  &:hover .time,
  &.hover .context-menu,
  &:hover .context-menu,
  .show-timestamp.time {
    cursor: default;
    opacity: 1;
    pointer-events: auto;
    background-color: @app-bg;
  }

  &:not(:hover) {
    .message-status {
      opacity: 1;
    }
  }
}

@keyframes marked-animation {
  to {
    background-color: inherit;
  }
}

.message-marked {
  .text {
    .accent-background-color(24%);
    animation-name: marked-animation;
    animation-delay: 1s;
    animation-timing-function: @ease-out-quart;
    animation-duration: @animation-timing-slower * 2;
    animation-fill-mode: forwards;
  }
}

// MESSAGE - HEADER
.message-header {
  display: flex;
  line-height: @avatar-diameter-xs;
  margin-bottom: 4px;
  position: relative;
}

.message-header-icon {
  .flex-center;
  color: @graphite-dark;
  width: @conversation-message-sender-width;
}

.message-header-label {
  font-size: 12px;
  font-weight: @font-weight-regular;
  align-items: center;
  display: flex;
  flex: 1;
  min-width: 0; // fixes ellipsis not working with flexbox (FF)

  .message-header-plain-sender-name {
    font-weight: @font-weight-bold;
  }

  .message-header-sender-name {
    font-weight: @font-weight-bold;
    text-transform: capitalize;
  }
}

.message-header-label-sender {
  .label-nocase-bold-xs;
  &.accent-color-1 {
    color: fade(@accent_colors-1, 80%);
  }
  &.accent-color-2 {
    color: fade(@accent_colors-2, 72%);
  }
  &.accent-color-3 {
    color: @accent_colors-3;
  }
  &.accent-color-4 {
    color: fade(@accent_colors-4, 72%);
  }
  &.accent-color-5 {
    color: fade(@accent_colors-5, 80%);
  }
  &.accent-color-6 {
    color: fade(@accent_colors-6, 80%);
  }
  &.accent-color-7 {
    color: fade(@accent_colors-7, 64%);
  }
}

.message-header-label-icon {
  font-size: 8px;
  margin-left: 8px;
}

.message-header-label-service {
  font-size: 12px;
  margin-left: 4px;
  color: fade(@graphite-dark, 40%);
  text-transform: uppercase;
}

.message-header-line {
  background: @seperator-color;
  border: none;
  flex: 1;
  height: 1px;
  margin-left: 16px;
  min-width: @conversation-message-timestamp-width;
}

// MESSAGE - TIMESTAMP
.message-timestamp {
  border-bottom: 1px solid @seperator-color;
  height: 48px;
  line-height: 40px;
  margin-bottom: 16px;
  padding-top: 8px; // TODO margin top is not working because of collapsing margins
  user-select: none;

  &:not(.message-timestamp-visible) {
    display: none;
  }

  &:not(.message-timestamp-unread) {
    .message-unread-dot {
      display: none;
    }
  }

  &:not(.message-timestamp-day) {
    margin-right: @conversation-message-timestamp-width;
    border: 0;

    .message-header-label {
      border-bottom: 1px dotted @seperator-color;
    }
  }

  time[data-timestamp-type='normal'] {
    display: block;
  }
  time[data-timestamp-type='day'] {
    display: none;
  }
}

.message-timestamp-day {
  time[data-timestamp-type='normal'] {
    display: none;
  }
  time[data-timestamp-type='day'] {
    display: block;
  }
}

// MESSAGE - BODY
.message-body {
  position: relative;
  margin-top: -5px;
  padding-left: @conversation-message-sender-width;
  padding-right: @conversation-message-timestamp-width;

  .text {
    .text-selection();
    .accent-selection-color();
    display: inline-block;
    width: 100%;
    line-height: @line-height-lg;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .text-large {
    font-size: 40px;
    line-height: 40px;
  }

  .iframe-container {
    margin-bottom: 24px;
    margin-top: 16px;
  }

  .iframe-container-video {
    padding-bottom: 75%;
    position: relative;

    embed,
    iframe,
    object {
      position: absolute;
      left: 0;
      max-width: 100%;
    }
  }
}

.message-body-like {
  .flex-center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: @conversation-message-sender-width;
}

.message-asset-image {
  margin-top: 16px;
  margin-bottom: 24px;

  .image {
    display: inline-block;
    position: relative;
    max-width: 100%;
  }

  .image-loading {
    .image-element {
      cursor: default;
    }
    .image-placeholder-icon {
      display: flex;
    }
  }

  .image-element {
    cursor: pointer;
    max-width: 100%;
    max-height: 80vh;

    &.image-ephemeral {
      cursor: default;
      opacity: 0;
    }
  }

  .image-placeholder-icon {
    .asset-container-style;
    .full-screen;
    align-items: center;
    display: none;
    justify-content: center;
  }
}

// MESSAGE FOOTER
.message-footer {
  display: flex;
  flex-wrap: wrap;
  line-height: @avatar-diameter-xs;
}

.message-footer-icon {
  .flex-center;
  width: @conversation-message-sender-width;
}

.message-footer-label {
  font-size: @font-size-xs;
  display: flex;
  align-items: center;

  > * + * {
    margin-left: 8px;
  }
}

.message-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  margin-top: 4px;
  margin-left: @conversation-message-sender-width;
  margin-right: @conversation-message-timestamp-width;
  width: 100%;

  > *:not(:last-child) {
    margin-right: 8px;
    margin-bottom: 8px;
  }
}

.message-footer-close-button {
  .square(@avatar-diameter-xs);
  .flex-center;
  cursor: pointer;
  font-size: @font-size-xs;
}

// hover
.message-show-on-hover {
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: @ease-out-quart;
  transition-duration: @animation-timing-fast;

  .message:hover & {
    opacity: 1;
    transition-delay: @animation-timing-faster + 0.05;
  }
}

// MESSAGE - ACTIONS
.message-body-actions {
  position: absolute;
  top: 0;
  right: 0;
  width: @conversation-message-timestamp-width;
  height: @line-height-lg;

  // actions pill
  .action-pill-style() {
    opacity: 0;
    line-height: 18px;
    text-decoration: none;
    z-index: 1;
    transition: opacity, 0.3s;
  }

  // CONTEXT MENU
  .context-menu {
    .square(18px);
    .action-pill-style;
    display: flex;
    justify-content: center;
    position: absolute;
    right: 72px;
    top: 4px;

    &:focus {
      opacity: 1 !important;
      outline: none;
    }
  }

  .show-timestamp.time + .message-status {
    opacity: 0;
  }

  .time,
  .message-status {
    .action-pill-style;
    color: fade(#000, 40%);
    font-size: @font-size-xs;
    padding-left: 6px;
    padding-right: 6px;
    pointer-events: none;
    position: absolute;
    right: 24px;
    top: 3px;
    user-select: none;
  }

  .message-ephemeral-timer {
    position: absolute;
    top: 0;
    right: 8px;
  }
}

.message-body-actions-large {
  width: 160px;
  position: relative;
}

// MEMBER MESSAGE
.message-connected {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: 32px;
  margin-bottom: 48px;
}

.message-connected-header {
  font-size: @font-size-lg;
  line-height: 42px;
}

.message-connected-username,
.message-connected-contacts {
  color: @graphite;
  font-size: @font-size-xs;
  line-height: @line-height-sm;
}

.message-connected-avatar {
  margin-top: 32px;
}

.message-connected-cancel {
  .label-xs;
  cursor: pointer;
  margin-top: 32px;
}

.message-group-creation-header {
  font-size: 12px;
  margin-left: 72px;
  padding-top: 16px;
  font-weight: @font-weight-regular;
}

.message-group-creation-header-name {
  font-size: @font-size-lg;
  font-weight: @font-weight-bold;
  margin: 8px 0;
}

// PING MESSAGE
@keyframes ping-scale-animation {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.8);
  }
}

@keyframes ping-opacity-animation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.ping-animation {
  animation-name: ping-scale-animation, ping-opacity-animation;
  animation-delay: 0.05s, 0.05s;
  animation-timing-function: @ease-out-expo, @ease-out-quart;
  animation-duration: 0.7s, 0.7s;
}

.ping-animation-soft {
  animation-iteration-count: 3, 3;
}

.message-icon-ping {
  margin-left: 8px;
}

// CALL MESSAGE
.message-icon-missed-call {
  position: absolute;
  top: 8px;
  left: 16px;

  &.accent-color-1 {
    path {
      fill: @accent_colors-1;
    }
  }
  &.accent-color-2 {
    path {
      fill: @accent_colors-2;
    }
  }
  &.accent-color-3 {
    path {
      fill: @accent_colors-3;
    }
  }
  &.accent-color-4 {
    path {
      fill: @accent_colors-4;
    }
  }
  &.accent-color-5 {
    path {
      fill: @accent_colors-5;
    }
  }
  &.accent-color-6 {
    path {
      fill: @accent_colors-6;
    }
  }
  &.accent-color-7 {
    path {
      fill: @accent_colors-7;
    }
  }
}

// DECRYPT MESSAGE
.message-body-decrypt-error {
  min-height: 24px;
}

.message-header-decrypt-error-label {
  .label-xs;
  color: @graphite;
}

.message-header-decrypt-reset-session {
  .label-xs;
  display: inline-block;
  cursor: pointer;
  position: relative;
  height: 16px;
  width: 100%;
}

.message-header-decrypt-reset-session-action,
.message-header-decrypt-reset-session-spinner {
  position: absolute;
  left: 0;
  top: 0;
}

.message-header-decrypt-reset-session-action {
  height: 12px;
}

.message-header-decrypt-reset-session-spinner {
  top: 4px;
}

// MESSAGE SPACING
.message-asset {
  margin-top: 16px;
}

.message-call,
.message-ping {
  padding-top: 16px;
  margin-bottom: 24px;
}

.message-member,
.message-rename {
  padding-top: 16px;
  margin-bottom: 32px;
}

.message-call,
.message-member,
.message-ping,
.message-rename {
  .message-body-actions {
    position: relative;
  }
}

// TODO make generic class
.ephemeral-message-obfuscated {
  font-family: @font-family-ephemeral;
  .accent-color();
}

.ephemeral-asset-expired {
  .bg-color-ephemeral;
  .flex-center;
  color: #fff;
}
